﻿@page "/init"
@layout EmptyLayout
@inherits PmComponentBase

<PageTitle>@T("Initialization")</PageTitle>

<div class="header" style="margin:46px 0 0 53px;">
    <img class="hover-pointer" src="/img/mainLayout/logo-en.svg" />
</div>

<div class="body mt-2">
    <div style="width:684px;" class="mx-auto my-auto">
        <MCardTitle Class="emphasis--text h6 neutral-lighten-1--text">MASA PM @T("Initialization")</MCardTitle>
        <MStepper Value="_step" Elevation=0>
            <MStepperHeader Style="box-shadow:none !important">
                <MStepperStep Step="1" Complete="_step>1">
                    @T("Environment")
                </MStepperStep>
                <MDivider></MDivider>
                <MStepperStep Step="2">
                    @T("Cluster")
                </MStepperStep>
            </MStepperHeader>

            <MStepperItems>
                <MStepperContent Style="padding-top:12px !important;" Step="1">
                    <MForm Model="_customEnv" EnableValidation>
                        @{
                            foreach (var item in _customEnv.Environments)
                            {
                                <MRow NoGutters Justify="JustifyTypes.SpaceBetween">
                                    <MCol Cols="9">
                                        <STextField Disabled="@item.Disabled" TextColor="@item.Color" Class="pr-6 mb-6" Style="margin-top:9px;" @bind-Value="item.Name" Label="@T("Environment name")" Outlined></STextField>
                                    </MCol>
                                    <MCol Cols="3" Align="AlignTypes.Center" Class="pb-3">
                                        <SColorGroup @bind-Value="@item.Color" Colors="_colors"></SColorGroup>
                                    </MCol>
                                </MRow>
                                <MTextarea Outlined Label="@T("Environment description")" @bind-Value="item.Description"></MTextarea>
                                <div class="d-flex justify-end mb-6 mr-1">
                                    <MButton Class="mr-3" Icon Disabled="@(_customEnv.Environments.Count == 1)" OnClick="()=>RemoveEnvComponent(item.Index)">
                                        <SIcon>mdi-minus-box-outline</SIcon>
                                    </MButton>
                                    <MButton Class="mr-3" Icon OnClick="()=>AddEnvComponent(item.Index)">
                                        <SIcon>mdi-plus-box</SIcon>
                                    </MButton>
                                </div>
                            }
                        }
                        <SButton Height="40" Width=100 Style="float:right;" OnClick="()=>NextStep(context)">@T("Next step")</SButton>
                    </MForm>
                </MStepperContent>
                <MStepperContent Style="padding-top:12px !important;" Step="2">
                    <MForm Model="_initModel" EnableValidation>
                        <STextField Disabled Class="mt-2 mb-6" @bind-Value="_initModel.ClusterName" Label="@T("Cluster name")" Outlined></STextField>
                        <MTextarea Outlined Label="@T("Cluster description")" @bind-Value="_initModel.ClusterDescription"></MTextarea>
                        <div class="d-flex justify-end">
                            <SButton Height="40" Width=100 Outlined Class="text-btn mr-6" OnClick="()=>_step=1">@T("Previous step")</SButton>
                            <SButton Small OnClick="()=>InitAsync(context)" Loading="_initLoading">提交</SButton>
                        </div>
                    </MForm>
                </MStepperContent>
            </MStepperItems>
        </MStepper>
    </div>
</div>
